<!DOCTYPE html>
<html>

	<head>
		<title>多彩蓓蕾a</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<meta name="description" content=" ">
		<link rel="stylesheet" href="lib/mui.min.css" />
		<link rel="stylesheet" href="lib/weui.min.css">
		<link rel="stylesheet" href="css/jquery-weui.css">
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="lib/preview.css">
	</head>
	<script src="lib/jquery-2.1.4.js"></script>

	<script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.js"></script>
	<script src="js/jquery-weui.js"></script>
	<script src="lib/fastclick.js"></script>

	<style type="text/css">
		.addsa{
		color:#fff;
		}

		/*body {
			background: #f5f5f5;
		}*/
		
		.send_detail {
			background: #fff;
			padding-top: .5rem;
		}
		
		.send_detail .head-img {
			overflow: hidden;
			padding: 0 .5rem;
			margin-top: 0;
			height: 1.8rem;
		}
		
		.send_detail .head-img>img {
			float: left;
			width: 1.8rem;
			height: 1.8rem;
			border-radius: 4px;
		}
		
		.send_detail .head-info {
			width: 80%
		}
		
		.send_detail .head-info p:first-of-type {
			height: 1rem;
			line-height: 1rem;
			font-size: .7rem;
			color: #222;
		}
		
		.send_detail .news_zixun {
			padding: 0 .5rem;
			/*border-bottom: 1px solid #eee;*/
			/*margin-bottom: .5rem;*/
		}
		
		.send_detail .news_zixun .news_zixun_title {
			height: auto;
			color: #555;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			/*-webkit-line-clamp: 2;*/
			overflow: hidden;
			font-size: 0.8rem;
			margin: .5rem 0;
		}
		
		.send_detail .news_zixun .news_zixun_img {
			overflow: hidden;
		}
		
		.send_detail .news_zixun .news_zixun_img img {
			float: left;
			width: 31.6%;
			/*height: 80px;*/
			margin-right: 2.6%;
			margin-bottom: .5rem;
		}
		
		.send_detail .news_zixun .news_zixun_img img:nth-of-type(3n) {
			margin-right: 0px;
		}
		
		.send_detail .bg_bar {
			width: 100%;
			height: .5rem;
			background: #f4f4f4;
		}
		
		.topic_tle {
			padding: 0.5rem;
			font-size: 1rem;
		}
		
		.replay {
			background: #D9D9D9;
			color: #5A5A5A;
			margin: 0 .5rem;
			padding: .5rem;
			position: relative;
		}
		
		.replay p {
			min-height: 3rem;
		}
		
		.replay_btn {
			position: absolute;
			right: 0;
			bottom: -2.5rem;
			width: 4rem;
			height: 2rem;
			padding: 0;
			background: #0370a0;
			color: #fff;
		}
		
		.comm_item {
			padding-bottom: 5rem;
			border-top: 1px solid #d8d8d8;
		}
		
		.comm_item:nth-of-type(1) {
			border-top: 0px solid #fff;
		}
		
	</style>

	<body>
		<div class="send_detail comm_item">

			<div class="head-img">
				<img src="img/001.jpg">
				<div class="head-info">
					<p>于云鹤233</p>
					<p>
						<span>2017-03-17</span>

					</p>
				</div>
			</div>

			<div class="send_box">
				<div class="news_zixun">

					<p class="news_zixun_title">4月17日，某某领导视察，4月17日，某某领导视察4月17日</p>
					<!--<div class="news_zixun_img">
						<img class="lazy" data-original="img/001.jpg" data-preview-src="" data-preview-group="1">
						<img class="lazy" data-original="img/swiper-2.jpg" data-preview-src="" data-preview-group="1">
						<img class="lazy" data-original="img/swiper-3.jpg" data-preview-src="" data-preview-group="1">
						
					</div>-->

				</div>

			</div>
			<div class="replay">
				<p>@测试测试</p>

				<button class="replay_btn">回复</button>
			</div>
		</div>
		<div class="send_detail comm_item">

			<div class="head-img">
				<img src="img/head.png">
				<div class="head-info">
					<p>于云鹤233</p>
					<p>
						<span>2017-03-17</span>

					</p>
				</div>
			</div>

			<div class="send_box">
				<div class="news_zixun">

					<p class="news_zixun_title">4月17日，某某领导视察，4月17日，某某领导视察4月17日</p>
					<!--<div class="news_zixun_img">
						<img class="lazy" data-original="img/001.jpg" data-preview-src="" data-preview-group="1">
						<img class="lazy" data-original="img/swiper-2.jpg" data-preview-src="" data-preview-group="1">
						<img class="lazy" data-original="img/swiper-3.jpg" data-preview-src="" data-preview-group="1">
						
					</div>-->

				</div>

			</div>
			<div class="replay">
				<p>@测试测试</p>

				<button class="replay_btn">回复</button>
			</div>
		</div>
		<div class="send_detail comm_item">

			<div class="head-img">
				<img src="img/head.png">
				<div class="head-info">
					<p>于云鹤233</p>
					<p>
						<span>2017-03-17</span>

					</p>
				</div>
			</div>

			<div class="send_box">
				<div class="news_zixun">

					<p class="news_zixun_title">4月17日，某某领导视察，4月17日，某某领导视察4月17日</p>
					<!--<div class="news_zixun_img">
						<img class="lazy" data-original="img/001.jpg" data-preview-src="" data-preview-group="1">
						<img class="lazy" data-original="img/swiper-2.jpg" data-preview-src="" data-preview-group="1">
						<img class="lazy" data-original="img/swiper-3.jpg" data-preview-src="" data-preview-group="1">
						
					</div>-->

				</div>

			</div>
			<div class="replay">
				<p>@测试测试</p>

				<button class="replay_btn">回复</button>
			</div>
		</div>
		
		<script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.js"></script>
		<script src="lib/fastclick.js"></script>
		<script type="text/javascript" src="lib/mui.min.js"></script>
		<script type="text/javascript" src="lib/mui.previewimage.js"></script>
		<script type="text/javascript" src="lib/mui.zoom.js"></script>
		<script type="text/javascript" src="js/jquery-weui.js"></script>
		<script type="text/javascript">
			FastClick.attach(document.body);
			mui.init();

			mui.previewImage();
			//懒加载参数设置
			$("img.lazy").lazyload({
				placeholder: "img/pic_article.png",
				threshold: 200,
				event: 'scroll',
				//failurelimit : 10 ,
				effect: "fadeIn"
			});
		</script>
	</body>

</html>